// 元素独立或非独立工具 【 工具功能依赖于页面中的已知元素或不依赖于页面中元素 】
// 三方依赖或非依赖工具 【 当前工具借助于其它三方工具才能运行，或可以不借助于任何三方功能即可运行 】
// 独立文件或非独立文件工具 【 工具是由CSS+JS组成，或只有JS文件组成 】

(function () {
    let topSize = 10;
    let msgDoms = {};
    const ICONS = {
        success: "icon-success1",
        info: "icon-info",
        warning: "icon-warning",
        error: "icon-error",
        question: "icon-question"
    }
    function notice(options = {}) {
        // 用户参数和默认配置的合并
        let defaultOptions = {
            icon: null,
            title: "消息",
        }
        let setOpt = Object.assign(defaultOptions, options);

        let msgBoxDom = document.createElement("div");
        msgBoxDom.classList.add("notice-box", "in");
        msgBoxDom.style.top = topSize + "px";

        if (setOpt.icon) {
            let iconDom = document.createElement("div");
            iconDom.classList.add("icon");
            let fontDom = document.createElement("i");
            fontDom.classList.add("iconfont", ICONS[setOpt.icon]);
            iconDom.appendChild(fontDom);
            msgBoxDom.appendChild(iconDom);
        }

        let descDom = document.createElement("div");
        descDom.classList.add("desc");
        let titleDom = document.createElement("p");
        titleDom.classList.add("title");
        titleDom.textContent = setOpt.title;
        descDom.appendChild(titleDom);
        msgBoxDom.appendChild(descDom);

        let btnDom = document.createElement("div");
        btnDom.classList.add("btn");
        let closeDom = document.createElement("i");
        closeDom.classList.add("iconfont", "icon-close2");
        btnDom.appendChild(closeDom);
        msgBoxDom.appendChild(btnDom);

        document.body.appendChild(msgBoxDom);

        // 真实项目中一般会手写key的生成规则，或者直接选择对应的插件完成
        let key = Math.random();
        msgDoms[key] = msgBoxDom;

        // 计算后的 DOM元素的高度  ==> 这些属性必须是元素存于页面时才可以获取到对应值
        let msgBoxDomH = msgBoxDom.clientHeight;
        // console.log(msgBoxDomH);
        // 记录下一个提示框的top位置
        topSize = topSize + msgBoxDomH + 10;
        msgBoxDom.addEventListener("animationend", function (event) {
            if (event.animationName == "moveOut") {
                topSize = topSize - (msgBoxDomH + 10);
                document.body.removeChild(msgBoxDom);
                // 对象中如何删除一个已知元素
                delete msgDoms[key];
                for (let k in msgDoms) {
                    // parseFloat parseInt 属于逐位数值转换
                    msgDoms[k].style.top = (parseFloat(msgDoms[k].style.top) - (msgBoxDomH + 10)) + "px";
                }
            }
        })

        setTimeout(function () {
            msgBoxDom.classList.remove("in");
            msgBoxDom.classList.add("out");
        }, 5000)
    }

    window.notice = notice
})()